<template>
	<view class="app-diy-page" :class="mp_link_top ? 'mp_link_top' : ''">
		<view class="nav-bar dir-left-nowrap" :class="mp_link_top ? 'mp_link_top' : ''" v-if="newData.show_navs == 1">
			<block v-for="(nav, index) in newData.navs" :key="index">
				<view class="nav-bar-one cross-center box-grow-0" :class="nav_active === index ? 'active' : ''" @click='changeNav(index)'>
					{{nav.name}}
				</view>
			</block>
		</view>

		<view class="diy-template">
			<block v-for="(nav, index) in newData.navs" :key="index">
				<template v-if="index === nav_active">
					<block v-for="(temp, temp_index) in nav.template.data" :key="temp_index">
						<view v-if="temp.id === 'background'" class="app-diy-bg" :style="[{'background-color':`${temp.data.backgroundColor}`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${temp.data.position}`,
                            'background-repeat':`${temp.data.mode}`}]"></view>
						<template v-if="temp.id === 'search'">
							<view>
								<app-search-for :value="temp.data"></app-search-for>
							</view>
						</template>
						<template v-if="temp.id === 'banner'">
							<view v-if="temp.data.banners.length > 0">
								<app-swiper :swiperType="temp.data.style == 2 ? true : false" :swiperHeight="temp.data.height" :swiperList="temp.data.banners"
								 :mode="temp.data.fill == 1 ? 'scaleToFill' : 'aspectFit'" imageKey="pic_url"></app-swiper>
							</view>
						</template>
						<template v-else-if="temp.id === 'notice'">
							<view>
								<app-announcement :background="temp.data.background" :btn-color="temp.data.btnColor" :btn-height="temp.data.btnHeight"
								 :btn-radius="`${temp.data.btnRadius}rpx`" :btn-text="temp.data.btnText" :btn-text-color="temp.data.btnTextColor"
								 :btn-width="temp.data.btnWidth" :content="temp.data.content" :header-url="temp.data.headerUrl" :icon="temp.data.icon"
								 :name="temp.data.name" :textColor="temp.data.textColor"></app-announcement>
							</view>
						</template>
						<template v-else-if="temp.id === 'nav'">
							<view :style="{'background-color':temp.data.backgroundColor,
                                  'background-image': temp.data.backgroundPicUrl ? 'url('+temp.data.backgroundPicUrl+')' : 'none',
                                  'background-size':temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%',
                                  'background-position':temp.data.position,
                                  'background-repeat':temp.data.mode}">
								<app-navigation-icon :background="''" :color="temp.data.color" :rows="temp.data.rows" :columns="temp.data.columns"
								 :scroll="temp.data.scroll" :navs="temp.data.navs"></app-navigation-icon>
							</view>
						</template>
						<template v-if="temp.id === 'video'">
							<view>
								<app-video :pic-url="temp.data.pic_url" :url="temp.data.url"></app-video>
							</view>
						</template>
						<template v-else-if="temp.id === 'link'">
							<view>
								<app-associated-link :arrows-switch="temp.data.arrowsSwitch" :background="temp.data.background" :color="temp.data.color"
								 :position="temp.data.position" :style-color="temp.data.styleColor" :link="temp.data.link" :styleNum="temp.data.style"
								 :pic-switch="temp.data.picSwitch" :pic-url="temp.data.picUrl" :font-size="temp.data.fontSize" :title="temp.data.title"></app-associated-link>
							</view>
						</template>
						<template v-else-if="temp.id === 'topic'">
							<view v-if="temp.data.style === 'normal'">
								<app-special-topic :count="temp.data.count" :icon="temp.data.icon" :logo_1="temp.data.logo_1" :logo_2="temp.data.logo_2"
								 :topic_list="temp.data.topic_list"></app-special-topic>
							</view>
							<view v-if="temp.data.style === 'list'">
								<app-special-topic-list :cat-show="temp.data.cat_show" :list="temp.data.list" :topic-list="temp.data.topic_list"></app-special-topic-list>
							</view>
						</template>
						<template v-else-if="temp.id === 'rubik'">
							<view style="position: relative">
								<app-image-ad :image-style="temp.data.style" :list="temp.data.list" :height="temp.data.height"></app-image-ad>
								<block v-for="(hotspot, hotspot_index) in temp.data.hotspot" :key="hotspot_index">
									<app-hotspot :hotspot="hotspot"></app-hotspot>
								</block>
							</view>
						</template>
						<template v-if="temp.id === 'store'">
							<view>
								<app-shop :list="temp.data.list" :nav-pic-url="temp.data.navPicUrl" :score-pic-url="temp.data.scorePicUrl"
								 :show-name="temp.data.showName" :show-score="temp.data.showScore" :show-tel="temp.data.showTel" :scrollTop="scrollTop"></app-shop>
							</view>
						</template>
						<template v-else-if="temp.id === 'copyright'">
							<view>
								<app-copyright :background-color="temp.data.backgroundColor" :text="temp.data.text" :pic-url="temp.data.picUrl"
								 :link="temp.data.link"></app-copyright>
							</view>
						</template>
						<template v-else-if="temp.id === 'user-info'">
							<view>
								<app-user-center :top-pic-url="temp.data.backgroundPicUrl" :member-pic-url="userCenter.member_pic_url"
								 :top-style="temp.data.style"></app-user-center>
							</view>
						</template>
						<template v-else-if="temp.id === 'user-order'">
							<view>
								<app-my-order :order_bar="temp.data.navs" :background-color="temp.data.backgroundColor"></app-my-order>
							</view>
						</template>
						<template v-else-if="temp.id === 'goods'">
							<view v-if="temp.data.catPosition === 'top'" :style="[{'background-color':`${temp.data.backgroundColor}`,
                                  'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                  'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                  'background-position':`${temp.data.position}`,
                                  'background-repeat':`${temp.data.mode}`}]">
								<app-diy-goods-list :show-cat="temp.data.showCat" :show-buy-btn="temp.data.showBuyBtn" :cat-style="temp.data.catStyle"
								 :cat-list="temp.data.catList" :list="temp.data.list" :list-style="temp.data.listStyle" :goods-cover-proportion="temp.data.goodsCoverProportion"
								 :fill="temp.data.fill" :goods-style="temp.data.goodsStyle" :show-goods-name="temp.data.showGoodsName"
								 :text-style="temp.data.textStyle" :show-goods-price="temp.data.showGoodsPrice" :buy-btn="temp.data.buyBtn"
								 :sign="temp.id" :buy-btn-style="temp.data.buyBtnStyle" :buy-btn-text="temp.data.buyBtnText" :button-color="temp.data.buttonColor"
								 :show-goods-tag="temp.data.showGoodsTag" :customize-goods-tag="temp.data.customizeGoodsTag" :goods-tag-pic-url="temp.data.goodsTagPicUrl"
								 :cat-position="temp.data.catPosition"></app-diy-goods-list>
							</view>
							<view v-else :style="[{'background-color':`${temp.data.backgroundColor}`,
                                  'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                  'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                  'background-position':`${temp.data.position}`,
                                  'background-repeat':`${temp.data.mode}`}]">
								<app-recommended-product-list :show-cat="temp.data.showCat" :show-buy-btn="temp.data.showBuyBtn" :cat-style="temp.data.catStyle"
								 :cat-list="temp.data.catList" :list="temp.data.list" :list-style="temp.data.listStyle" :goods-cover-proportion="temp.data.goodsCoverProportion"
								 :fill="temp.data.fill" :goods-style="temp.data.goodsStyle" :show-goods-name="temp.data.showGoodsName"
								 :show-goods-price="temp.data.showGoodsPrice" :buy-btn="temp.data.buyBtn" :sign="temp.id" :buy-btn-style="temp.data.buyBtnStyle"
								 :buy-btn-text="temp.data.buyBtnText" :show-goods-tag="temp.data.showGoodsTag" :customize-goods-tag="temp.data.customizeGoodsTag"
								 :goods-tag-pic-url="temp.data.goodsTagPicUrl" :button-color="temp.data.buttonColor" :cat-position="temp.data.catPosition"></app-recommended-product-list>
							</view>
						</template>
						<template v-else-if="temp.id === 'pintuan' || temp.id === 'miaosha' || temp.id === 'advance' || temp.id === 'booking' || temp.id === 'bargain' || temp.id === 'pick' || temp.id === 'lottery' || temp.id === 'integral-mall'">
							<view :style="[{'background-color':`${temp.data.backgroundColor}`,
                                  'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                  'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                  'background-position':`${temp.data.position}`,
                                  'background-repeat':`${temp.data.mode}`}]">
								<template v-if="temp.id === 'integral-mall' && temp.data.showCoupon">
									<view>
										<app-coupon :none-color="true" :coupon_list="temp.data.coupon_list" :sign="temp.id" :text-color="temp.data.couponColor"
										 :show-top="false" :unclaimed-bg="temp.data.couponPicUrl"></app-coupon>
									</view>
								</template>
								<app-diy-goods-list :show-buy-btn="temp.data.showBuyBtn" :list="temp.data.list" :list-style="temp.data.listStyle"
								 :goods-cover-proportion="temp.data.goodsCoverProportion" :fill="temp.data.fill" :goods-style="temp.data.goodsStyle"
								 :show-goods-name="temp.data.showGoodsName" :text-style="temp.data.textStyle" buy-btn="text" :sign="temp.id"
								 :button-color="temp.data.buttonColor" :buy-btn-style="temp.data.buyBtnStyle" :buy-btn-text="temp.data.buyBtnText"
								 :show-goods-tag="temp.data.showGoodsTag" :page-hide="pageHide" :customize-goods-tag="temp.data.customizeGoodsTag"
								 :goods-tag-pic-url="temp.data.goodsTagPicUrl"></app-diy-goods-list>
							</view>

						</template>

						<!-- 优惠券 -->
						<template v-else-if="temp.id === 'coupon'">
							<view>
								<app-exclusive-coupon :background="temp.data.backgroundColor" :coupon_list="temp.data.coupon_list" :receive-bg="temp.data.receiveBg"
								 :text-color="temp.data.textColor" :show-top="false" :unclaimed-bg="temp.data.unclaimedBg"></app-exclusive-coupon>
							</view>
						</template>
						<template v-if="temp.id === 'timer'">
							<view>
								<app-diy-timer :pic-url="temp.data.picUrl" :start-date-time="temp.data.startDateTime" :end-date-time="temp.data.endDateTime"
								 :page-hide="pageHide" :link="temp.data.link"></app-diy-timer>
							</view>
						</template>
						<template v-else-if="temp.id === 'mch'">
							<view :style="[{'background-color':`${temp.data.backgroundColor}`,
                                  'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                                  'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                                  'background-position':`${temp.data.position}`,
                                  'background-repeat':`${temp.data.mode}`}]">
								<app-goods-shop :card-style="temp.data.cardStyle" :background-color="temp.data.backgroundColor" type="diy"
								 :list="temp.data.list" :show-goods="temp.data.showGoods"></app-goods-shop>
							</view>
						</template>
						<template v-else-if="temp.id === 'empty'">
							<view v-if="jimaiPart">
								<!-- <app-empty :height="temp.data.height" :background-color="temp.data.background"></app-empty> -->
								<tiyan :imagel="jimaiPart.mch.image1" :p_id="jimaiPart.platform.mch_id" :mch_id="jimaiPart.mch.mch_id" :imager="jimaiPart.platform.image1"></tiyan>
								<tuiguang :imagel="jimaiPart.mch.image2" :p_id="jimaiPart.platform.mch_id" :mch_id="jimaiPart.mch.mch_id" :imager="jimaiPart.platform.image2"></tuiguang>
							</view>
						</template>
						<template v-else-if="temp.id === 'ad'">
							<view>
								<app-ad :unit-id="temp.data.id" :type="temp.data.type" :coupon-url="coupon_url" :video-url="temp.data.video_url"
								 :pic-url="temp.data.pic_url" :coupon-params="{template_id:nav.template_id}"></app-ad>
							</view>
						</template>
						<template v-else-if="temp.id === 'modal'">
							<view>
								<app-popup-ad :opened="temp.data.opened" :times="temp.data.times" :list="temp.data.list" :multiple="true"
								 :is_storage="is_storage" :mark="homePages.id + '-' + homePages.navs[nav_active].id + '-' + temp_index"></app-popup-ad>
							</view>
						</template>
						<template v-else-if="temp.id === 'quick-nav'">
							<view>
								<app-quick-navigation :value="temp.data" v-if="temp.data.navSwitch == 1" :use-mall-config="temp.data.useMallConfig"></app-quick-navigation>
							</view>
						</template>
						<!-- #ifdef MP-WEIXIN -->
						<template v-else-if="temp.id === 'mp-link'">
							<view :class="temp.data.position === 'top' ? `mp-link-top` : ``">
								<official-account @load="mpLink(temp.data.position)" @error="mpLinkError"></official-account>
							</view>
						</template>
						<!-- #endif -->
						<!-- #ifndef MP-TOUTIAO -->
						<template v-else-if="temp.id === 'map'">
							<app-map :background-pic-url="temp.data.backgroundPicUrl" :height="temp.data.height" :latitude="temp.data.latitude"
							 :longitude="temp.data.longitude" :margin-top="temp.data.marginTop" :margin-top-color="temp.data.marginTopColor"
							 :padding-x="temp.data.paddingX" :padding-y="temp.data.paddingY"></app-map>
						</template>
						<!-- #endif -->
						<template v-else-if="temp.id === 'check-in'">
							<view>
								<app-check-in :background-pic-url="temp.data.backgroundPicUrl" :hotspot="temp.data.hotspot" :show-text="temp.data.showText"
								 :text-color="temp.data.textColor" :text-position="temp.data.textPosition"></app-check-in>
							</view>
						</template>
						<template v-else-if="temp.id === 'image-text'">
							<view>
								<app-rich :content='temp.data.content'></app-rich>
							</view>
						</template>
						<template v-else-if="temp.id === 'form'">
							<view>
								<app-diy-form :title="temp.name" :list="temp.data.formDialog" :item-padding-x="temp.data.inputPadding"
								 :item-margin-y="temp.data.marginBottom" :item-height="temp.data.height" :show-item-border="false"
								 :label-position="temp.data.style" :label-color="temp.data.inputLabel" label-text-align="left"
								 :show-input-border="true" :input-background="temp.data.inputBackground" :input-border-color="temp.data.inputBorder"
								 :input-text-color="temp.data.inputText" :input-placeholder-color="temp.data.inputTip" :input-radius="temp.data.radius"
								 :show-submit="true" :submit-url="diyFormSubmitUrl" :submit-btn-text="temp.data.borderContent"
								 :submit-btn-height="temp.data.buttonHeight" :submit-btn-padding="temp.data.buttonPadding" :submit-btn-margin="temp.data.buttonMargin"
								 :submit-btn-radius="temp.data.buttonRadius" :submit-btn-background="temp.data.borderBackground"
								 :submit-btn-border-color="temp.data.borderBorder" :submit-btn-text-color="temp.data.borderText"
								 :background-color="temp.data.backgroundColor" :background-image="temp.data.backgroundPicUrl" :background-width="temp.data.backgroundWidth"
								 :background-height="temp.data.backgroundHeight" :background-position="temp.data.position" :background-repeat="temp.data.mode"
								 :margin-top="temp.data.marginTop" :padding-top="temp.data.padding" :padding-bottom="temp.data.padding"></app-diy-form>
							</view>
						</template>
						<template v-else-if="temp.id === 'notice'">
							<view>
							</view>
						</template>
						<template v-else-if="temp.id === 'vip-card'">
							<view>
								<app-vip-card :value="temp.data" top="0" :background="temp.data.background"></app-vip-card>
							</view>
						</template>
						<template v-else-if="temp.id === 'live'">
							<view>
								<app-live :value="temp.data"></app-live>
							</view>
						</template>
					</block>
				</template>
			</block>
			
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appSearchFor from '../../page-component/app-search-for/app-search-for.vue';
	import appSwiper from '../../page-component/app-swiper/swiper.vue';
	import appAnnouncement from '../../page-component/app-announcement/app-announcement.vue';
	import appNavigationIcon from '../../page-component/app-navigation-icon/app-navigation-icon.vue';
	import appVideo from '../../page-component/app-video/app-video.vue';
	import appAssociatedLink from '../../page-component/app-associated-link/app-associated-link.vue';
	import appSpecialTopic from '../../page-component/app-special-topic/app-special-topic-normal.vue';
	import appSpecialTopicList from '../../page-component/app-special-topic/app-special-topic-list.vue';
	import appImageAd from '../../page-component/app-image-ad/app-image-ad.vue';
	import appHotspot from '../../basic-component/app-hotspot/app-hotspot.vue';
	import appShop from '../../page-component/app-shop/app-shop.vue';
	import appCopyright from '../../page-component/app-copyright/app-copyright.vue';
	import appUserCenter from '../../page-component/app-user-center-top/app-user-center-top.vue';
	import appMyOrder from '../../page-component/app-my-order/app-my-order.vue';
	import appRecommendedProduct from '../../page-component/app-recommended-product/app-recommended-product.vue';
	import appRecommendedProductList from '../../page-component/app-recommended-product/app-recommended-product-list.vue';
	import appExclusiveCoupon from '../../page-component/app-exclusive-coupon/app-exclusive-coupon.vue';
	import appDiyTimer from '../../page-component/app-diy-timer/app-diy-timer.vue';
	import appGoodsShop from '../../page-component/app-good-shop-recommendation/app-good-shop-recommendation.vue';
	import appGroupGoods from '../../page-component/app-group-goods/app-group-goods.vue';
	import appEmpty from '../../basic-component/app-empty/app-empty.vue';
	import appPopupAd from '../../page-component/app-popup-ad/app-popup-ad.vue';
	import appQuickNavigation from '../../page-component/app-quick-navigation/app-quick-navigation.vue';
	import appCheckIn from '../../page-component/app-check-in/app-check-in.vue';
	import appRich from '../../basic-component/app-rich/parse.vue';
	import appReservation from "../../page-component/app-reservation/app-reservation.vue";
	import appSpike from "../../page-component/app-spike/app-spike.vue";
	import appDiyGoodsList from "../../page-component/app-diy-goods-list/app-diy-goods-list.vue";
	import appDiyForm from "../../page-component/app-diy-form/app-diy-form.vue";
	import appMap from "../../page-component/app-map/app-map.vue";
	import appVipCard from "../../page-component/app-vip-card/app-vip-card.vue";
	import appAd from "../../page-component/app-ad/app-ad";
	import appLive from "../../page-component/app-live/app-live.vue";
	import tiyan from '../jimai/tiyan.vue'
	import tuiguang from '../jimai/tuiguang.vue'
	export default {
		name: "app-diy-page",
		components: {
			'app-search-for': appSearchFor,
			'app-swiper': appSwiper,
			'app-announcement': appAnnouncement,
			'app-navigation-icon': appNavigationIcon,
			'app-video': appVideo,
			'app-associated-link': appAssociatedLink,
			'app-special-topic': appSpecialTopic,
			'app-special-topic-list': appSpecialTopicList,
			'app-image-ad': appImageAd,
			'app-hotspot': appHotspot,
			'app-shop': appShop,
			'app-copyright': appCopyright,
			'app-user-center': appUserCenter,
			'app-my-order': appMyOrder,
			'app-recommended-product': appRecommendedProduct,
			'app-recommended-product-list': appRecommendedProductList,
			'app-exclusive-coupon': appExclusiveCoupon,
			'app-diy-timer': appDiyTimer,
			'app-goods-shop': appGoodsShop,
			'app-group-goods': appGroupGoods,
			'app-empty': appEmpty,
			'app-popup-ad': appPopupAd,
			'app-quick-navigation': appQuickNavigation,
			'app-check-in': appCheckIn,
			'app-rich': appRich,
			'app-reservation': appReservation,
			'app-spike': appSpike,
			'app-diy-goods-list': appDiyGoodsList,
			'app-diy-form': appDiyForm,
			'app-vip-card': appVipCard,
			appMap,
			appAd,
			appLive,
			tiyan,
			tuiguang
		},
		props: {
			homePages: {
				type: Object,
				default () {
					return {};
				}
			},
			scrollTop: {
				type: Number,
				default () {
					return 0;
				}
			},
			is_storage: Boolean,
			pageHide: Boolean,
		},
		computed: {
			newData() {
				uni.setNavigationBarTitle({
					title: this.homePages.title,
				});
				//position  mode
				(this.homePages.navs).map(i => {
					i.template.data.map(j => {
						if (j.data.position) {
							j.data.position = this.transLabelBackgroundPosition(j.data.position)
						} else {
							j.data.position = 'center'
						}
						if (j.data.mode) {
							j.data.mode = this.transLabelBackgroundRepeat(j.data.mode)
						} else {
							j.data.mode = 'no-repeat'
						}
						if (j.id == 'form') {
							j.data.style = this.transLabelPosition(j.data.style)
						}
						if (j.id == 'rubik') {
							j.data.hotspot.map(hot => {
								hot = this.rubikHotspot(hot)
							})
						}
					})
				})
				return this.homePages;
			},
			...mapState({
				userCenter: state => state.mallConfig.user_center,
			}),
			diyFormSubmitUrl() {
				return this.$api.diy.page_store;
			}
		},
		data() {
			return {
				nav_active: 0,
				mp_link_top: false,
				coupon_url: this.$api.diy.receive,
				coupon_params: {},
				jimaiPart:''
			};
		},
		created(){
			this.getPart()
		},
		methods: {
			getPart(){
				var mch_id = uni.getStorageSync('s_mch_id')
				this.$request({
				    url: this.$api.jimai.index_part,
				    data: {mch_id:mch_id}
				}).then(info => {
				   this.jimaiPart = info.data.setting
				}).catch(info => {})
			},
			rubikHotspot(hotspot) {
				if (hotspot && hotspot.link) {
					hotspot.link.url = hotspot.link.value;
					hotspot.link.openType = hotspot.link.open_type;
				}
				return hotspot;
			},
			changeNav(index) {
				this.nav_active = index;
				this.mp_link_top = false;
			},

			mpLink(position) {
				if (position === 'top') {
					this.mp_link_top = true;
				}
			},
			transLabelPosition(val) {
				if (val == 3) {
					return 'top';
				}
				if (val == 2) {
					return 'inset';
				}
				return 'left';
			},
			transLabelBackgroundPosition(val) {
				if (val == 1) return 'left top';
				if (val == 2) return 'center top';
				if (val == 3) return 'right top';
				if (val == 4) return 'left center';
				if (val == 5) return 'center center';
				if (val == 6) return 'right center';
				if (val == 7) return 'left bottom';
				if (val == 8) return 'center bottom';
				if (val == 9) return 'right bottom';
				return 'center';
			},
			transLabelBackgroundRepeat(val) {
				if (val == 1) return 'no-repeat';
				if (val == 2) return 'repeat-x';
				if (val == 3) return 'repeat-y';
				if (val == 4) return 'repeat';
				return 'no-repeat';
			},
			mpLinkError() {
				this.mp_link_top = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-diy-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.app-diy-page {
		width: 100%;
		height: 100%;

		.nav-bar {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1500;
			background-color: #ffffff;
			width: 100%;
			height: #{44px};
			padding: 0 #{30rpx};
			overflow-x: auto;
			border-bottom: #{1rpx} solid #e2e2e2;

			.nav-bar-one {
				width: auto;
				margin-right: #{30rpx};
				padding: 0 #{15rpx};

				&.active {
					color: #ff4544;
					border-bottom: #{4rpx} solid #ff4544;
				}
			}

			&.mp_link_top {
				top: #{84px};
			}

			&.mp_link_top~.diy-template {
				margin-top: #{44px + 84px};
			}

			&~.diy-template {
				margin-top: #{44px};
			}
		}

		.mp-link-top {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1500;
			width: 100%;
		}

		&.mp_link_top {
			margin-top: #{168rpx};
		}
	}
</style>
